<template>
    <div class="app-container ex_place_my_class" id="place_in" ref="ex_place_ref">
        <!-- 头部盒子 -->
        <el-row :gutter="50" style="height: 100px">
            <el-col :span="18" style="padding: 10px;text-align: center;height: 100%">
                <span class="ex_place_head_title_font">{{ exam.name }}</span>
            </el-col>
            <el-col :span="5">
                <!-- 时钟 -->
                <CLOCK style="float: left" color="black" shadow="white"/>
            </el-col>
            <el-col :span="1">
                <!-- 全屏按键 -->
                <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" style="float: right;" @click="fullScreen"/>
            </el-col>
        </el-row>
        <!-- 下边盒子 -->
        <el-row>
            <el-col :span="18" style="background: white;padding:10px;border-radius: 16px;">
                <el-empty style="margin-top: 100px" v-if="isEmpty(exam.place)"></el-empty>
                <el-row v-else :gutter="10" style="height: 100%">
                    <el-col :span="11">
                        <span class="my-descriptions_title">{{ exam.place.skillName }}</span>
                        <p>
                            <span class="my-descriptions_label">场地：</span>
                            <span class="my-descriptions_content">
                            {{ exam.place.placeName }}-{{ exam.index + 1 }}
                        </span>
                        </p>
                        <p v-if="isView(user_list[0])">
                            <span class="my-descriptions_sheet_label">评分表：</span>
                            <span class="my-descriptions_sheet_content">
                            {{ sheetMap[placeId + '-' + user_list[0]].name }}
                        </span>
                        </p>
                        <div v-if="isView(user_list[0])">
                            <p class="my-descriptions_sheet_label">题目：</p>
                            <p class="my-descriptions_sheet_content">
                                {{ sheetMap[placeId + '-' + user_list[0]].question }}
                            </p>
                        </div>
                    </el-col>
                    <el-col :offset="1" :span="11" style="height: 100%;text-align: center;padding-top: 3%">
                        <div style="width: 100%;height: 80%">
                            <img v-if="isView(user_list[0])" style="width: 100%;height: 100%;object-fit: cover;border-radius: 3px" :src="sheetMap[placeId+'-'+user_list[0]].imageUrl" alt="">
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :offset="1" :span="5" style="background: white;border-radius: 16px;padding: 10px">
                <el-row :gutter="10">
                    <el-col>
                        <el-table :data="user_list" height="380px" :row-class-name="tableRowClassName"
                                  :show-header="false" style="border-radius: 16px;width: 100%">
                            <el-table-column label="学生列表" align="center" :width="nameShow ? 100 : ''">
                                <template scope="scope">
                                    <div class="student_code">
                                        <el-tag v-if="isView(scope.row)" effect="plain">{{ scope.row }}</el-tag>
                                        <el-tag v-else effect="plain" size="mini" style="visibility:hidden"/>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column v-if="nameShow" label="学生姓名" align="center">
                                <template scope="scope">
                                    <div class="student_name">
                                        <el-tag v-if="isView(scope.row)" type="info" effect="plain">
                                            {{ peopleMap[scope.row].userName }}
                                        </el-tag>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                    <el-col style="text-align: center;padding-top: 3%">
                        <el-row>
                            <el-col>
                                <COUNT_DOWN v-if="!countDown_or_timekeeping" ref="countdown" :width="230" style="margin: 0 auto"/>
                                <TIMEKEEPING v-else ref="timekeeping"/>
                            </el-col>
                        </el-row>
                        <el-row style="padding-top: 20px">
                            <el-col>
                                <el-button @click="countDown_or_timekeeping = !countDown_or_timekeeping">
                                    {{ countDown_or_timekeeping ? '倒计时' : '计时' }}
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <!-- 文字标识 -->
        <div class="ex_place_middle_company">
            <span>上海嘉奕医学科技有限公司 技术支持</span>
        </div>
    </div>
</template>

<script>
import screenfull from 'screenfull'
import CLOCK from "@/views/tool/date/clock.vue";//时钟
import TIMEKEEPING from "@/views/tool/date/timekeeping.vue";//计时
import COUNT_DOWN from "@/views/tool/date/count_down.vue";
import {isEmpty, isNotNull} from "@/utils/zzDouUtils/objUtil";
import ScaleBox from "vue2-scale-box";

//倒计时

export default {
    name: "place_show_in",
    components: {CLOCK, COUNT_DOWN, TIMEKEEPING, ScaleBox},
    data() {
        return {
            dou: 30,
            dou_ver: 0,
            user_list: [],
            peopleMap: {},
            sheetMap: {},
            placeId: null,
            nameShow: false,
            exam: {
                name: null,
                exStartDate: null,
                exEndDate: null,
                mustSkill: '[]',
                index: 0,
                allotStatus: null,
                place: {},
                data: [],
            },
            skillName: null,
            sheetStr: null,
            studentList: [],
            countDown_or_timekeeping: false,
            domain: process.env.VUE_APP_BASE_API,
            socket: null,
            socketReceiveMsg: null,
            isFullscreen: false,
        };
    },
    watch: {},
    created() {

    },
    mounted() {
        this.initFullScreen()
    },
    methods: {
        isEmpty,
        isView(code) {
            const a = this.peopleMap[code];
            return a != null && a.view;
        },
        /** 全屏 */
        fullScreen() {
            if (!screenfull.isEnabled) {
                this.$message({message: '你的浏览器不支持全屏', type: 'warning'})
                return false
            }
            screenfull.toggle(this.$refs.ex_place_ref);
        },
        changeFullScreen() {
            this.isFullscreen = screenfull.isFullscreen
        },
        initFullScreen() {
            if (screenfull.isEnabled) {
                screenfull.on('change', this.changeFullScreen)
            }
        },
        destroyFullScreen() {
            if (screenfull.isEnabled) {
                screenfull.off('change', this.changeFullScreen)
            }
        },
        /** 学生列表第一列颜色 */
        tableRowClassName({row, rowIndex}) {
            if (rowIndex === 0) {
                return 'warning-row';
            }
            return '';
        },
        /** 处理指令 */
        manageOrder(order) {
            if (isNotNull(order)) {
                let oo = order.split('^')[0];
                if (oo == 'countDown_or_timekeeping') {
                    this.countDown_or_timekeeping = !this.countDown_or_timekeeping;
                } else if (oo.startsWith('timekeeping_')) {//计时
                    if (oo.endsWith('pause')) {
                        this.$refs.timekeeping.pause();
                    } else if (oo.endsWith('start')) {
                        this.$refs.timekeeping.start();
                    } else {
                        this.$refs.timekeeping.reset();
                    }
                } else if (oo.startsWith('count_down')) {//倒计时
                    if (oo.endsWith('pause')) {
                        this.$refs.countdown.clearTimer();
                    } else if (oo.endsWith('start')) {
                        this.$refs.countdown.openTimer();
                    } else if (oo.endsWith('reset')) {
                        this.$refs.countdown.resetSecond();
                    } else {
                        let ooo = oo.split('_');
                        this.$refs.countdown.value = Number(ooo[ooo.length - 1]);
                    }
                }
            }
        }
    },
    beforeDestroy() {
        this.destroyFullScreen()
    }
}
</script>
<style scoped>
.ex_place_my_class {
    width: 100%;
    padding-left: 50px;
    position: relative;
    border-radius: 3px;
    background-color: #e1f3da;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* 禁止选中 */
    -webkit-user-select: none; /*webkit浏览器*/
    -moz-user-select: none; /*火狐*/
    -ms-user-select: none; /*IE10*/
    user-select: none;
}


.ex_place_head_title_font {
    font-size: 350%;
    font-weight: bold;
    color: black;
}


.my-descriptions_title {
    font-size: 400%;
    font-weight: bold;
}

.my-descriptions_label {
    font-size: 200%;
}

.my-descriptions_content {
    font-size: 200%;
    color: #48D1CC;
    font-weight: bold;
}

.my-descriptions_sheet_label {
    font-size: 200%;
}

.my-descriptions_sheet_content {
    resize: both; /* 设置容器可以在水平和垂直方向上调整大小。 */
    white-space: pre-line;
    font-size: 20pt;
    color: #7a6df0;
    font-weight: bold;
}


.ex_place_middle_company {
    height: 40px;
    line-height: 40px;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #34bfa3;
    font-weight: bold;
    font-family: Arial;
    font-size: 16px;
    letter-spacing: 1px;
    position: absolute;
}

.el-table .warning-row {
    background: oldlace;
}

.student_code .el-tag {
    width: 80px;
    height: 45px !important;
    text-align: center;
    font-size: 35px !important;
    font-weight: bold;
    line-height: 45px !important;
}

.student_name .el-tag {
    width: auto;
    height: 45px !important;
    text-align: center;
    font-size: 20px !important;
    font-weight: bold;
    line-height: 45px !important;
}
</style>
